<template>
  <view>
    <view class="publish-title">
      <uni-nav-bar title="新动态" leftIcon="closeempty" @clickLeft="backTo()">
        <view slot="right" class="publish-icon" @click="publish">
          <text>发布</text>
        </view>
      </uni-nav-bar>
    </view>
    <view class="container">
      <view class="text">
        <uni-easyinput
          type="textarea"
          v-model="news.content"
          :focus="true"
          :inputBorder="false"
          :autoHeight="true"
          :clearSize="30"
          placeholder="来呀,写下你的心情"
          placeholderStyle="font-size: 30rpx"
          @input="bindContentInput"
        >
        </uni-easyinput>
      </view>
      <uni-file-picker
        fileMediatype="image"
        mode="grid"
        :auto-upload="false"
        :limit="4"
        @select="select"
        @progress="progress()"
        @success="success()"
        @fail="fail()"
      >
        <view class="chose-image">
          <image src="../../static/img/img_show.png"></image>
          <text>+图片</text>
        </view>
      </uni-file-picker>
      <!-- <view class="image-list" v-if="imageList.length > 0">
				<view class="item" v-for="(item,index) in imageList" :key="index">
				  <image src="item.tempFilePath"></image>
				  <icon v-if="item.percent==100" class="rm" type="clear" color="red" data-index="index" data-item="item" @click="removeImage"></icon>
				  <progress percent="item.percent" v-if="item.error" color="#FF0000" />
				  <progress percent="item.percent" v-else  />
				</view>
			</view> -->

      <view class="function-view">
        <view class="row" @click="getLocation">
          <view class="left" v-if="news.address">{{ news.address }}</view>
          <view class="left" v-else>请选择位置</view>
          <view class="right">
            <image
              class="go-icon"
              src="/img/icons/to_icon_show_small.png"
            ></image>
          </view>
        </view>
        <!-- <navigator url="/pages/topic/topic" class="row" >
				  <view class="left">{{topicTitle}}</view> 
				  <view class="right">
					<image class="go-icon" src='/img/icons/to_icon_show_small.png'></image>
				  </view>
				</navigator> -->
      </view>
    </view>
  </view>
</template>

<script>
const InspireCloud = require('@byteinspire/js-sdk')
import API from '../../config/api.js'
export default {
  data() {
    return {
      news: {
        content: '',
        imageList: [],
        address: '浙江省宁波市',
      },
      // topicTitle: '',
      // topicTitle: '请选择话题',
    }
  },
  methods: {
    backTo: function () {
      uni.navigateBack({})
    },
    publish: function () {
      if (this.news.content === '') {
        uni.showModal({
          title: '提示',
          content: '请输入内容',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定')
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          },
        })
      } else if (this.news.imageList.length === 0) {
        uni.showModal({
          title: '提示',
          content: '请选择您的图片',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定')
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          },
        })
      } else {
        console.log('111')
        uni.request({
          url: API.Publish,
          data: {
            images: this.news.imageList,
            content: this.news.content,
            address: this.news.address,
          },
          method: 'POST',
          success(res) {
            console.log(res)
          },
        })
      }
    },
    bindContentInput: function (e) {
      console.log(e)
      this.news.content = e
    },
    select(e) {
      // console.log('选择文件：',e.tempFilePaths[0]);
      console.log(e)
      const serviceId = 'qcb96y'
      const fileUploadToken = 'f46e5989-b967-4e7f-ae7c-ea29b9aece3a'
      this.news.imageList = [].concat(e.tempFilePaths)
      const inspirecloud = new InspireCloud({ serviceId })
      const file = {
        path: e.tempFilePaths[0],
      }
      console.log(file.path)
      inspirecloud.file
        .upload('99.jpg', e.tempFilePaths[0], { token: fileUploadToken })
        .then(data => {
          // 上传成功
          console.log(data.url)
        })
        .catch(error => {
          // 调用失败，进行错误处理
          console.log('error')
        })
    },
    // 获取上传进度
    progress(e) {
      console.log('上传进度：', e)
    },

    // 上传成功
    success(e) {
      console.log('上传成功')
    },

    // 上传失败
    fail(e) {
      console.log('上传失败：', e)
    },
    getLocation: function () {
      // uni.getLocation({
      // 	type: 'wgs84',
      // 	success(res) {
      // 		console.log(res);
      // 	}
      // })
      var that = this
      uni.chooseImage({
        success(res) {
          console.log(res)
        },
      })
      // uni.chooseLocation({
      // 	success: function(res) {
      // 		console.log(res);
      // 		console.log(that.news);
      // 		that.news.address = res.address;
      // 	}
      // })
    },
  },
}
</script>

<style>
.publish-icon {
  padding: 10rpx 30rpx;
  background-color: #00c8b6;
  font-size: 30rpx;
  color: white;
  border-radius: 50rpx;
}

.container {
  padding: 40rpx;
  padding-bottom: 140rpx;
}

.chose-image {
  width: 100rpx;
  padding: 10rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #8c8c8c;
  font-size: 28rpx;
}

.chose-image image {
  width: 60rpx;
  height: 60rpx;
}

.image-list {
  margin-top: 20rpx;
  display: flex;
  flex-direction: row;
  justify-content: start;

  flex-wrap: wrap;
}
.image-list .item {
  position: relative;
  padding: 15rpx;
}
.image-list .item image {
  width: 150rpx;
  height: 150rpx;
}

.image-list .item .rm {
  position: absolute;
  right: -10rpx;
  top: -10rpx;
}

.text {
  margin: 30rpx 0;
  font-size: 50rpx;
}

.function-view {
  font-size: 28rpx;
}

.function-view .row {
  padding: 30rpx 0;
  border-bottom: 1px solid #efefef;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.function-view .row .right {
  color: #8c8c8c;
}
.function-view .row .go-icon {
  margin: 0 20rpx;
  width: 16rpx;
  height: 16rpx;
}

.publish-btn {
  position: fixed;
  background-color: #4cc5b6;
  color: #fff;
  width: 100%;
  bottom: 0;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
